import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link ,browserHistory} from 'react-router';
import api from '../api';
import {bind_change} from '../common/State';
import {  message,Row,Col,Button,Input,InputNumber,Form } from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
const InputGroup = Input.Group;


class ChangePassword extends React.Component {
  constructor(props, context){
      super(props, context);
      this.state={
      };
  }

  componentWillMount(){

  }

  componentDidMount(){
  
  }
  //保存事件
  btnSaveClick(event){
      const {validateFieldsAndScroll,setFields } = this.props.form;
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return
        }
        if(values.newPwd != values.newPwd2){
            setFields({
                newPwd2:{
                    value:values.newPwd2,
                    errors:[new Error('两次密码输入不一致')]
                }
            })
            return;
        }
        let passwd = values.newPwd;
        this.save(passwd)
      })
  }
  //保存请求
  async save(passwd){
    const {resetFields } = this.props.form;
    let result = await api('/authority/modify/password',{passwd})
    if(result.cd!=0){
        message.error(result.msg);
        return;
    }
    message.success('修改成功',1,() => {
        resetFields();
        this.context.router.goBack();
    })
  }

  render() {
    const { getFieldDecorator,setFieldsValue} = this.props.form;
    return (
        <div>
            <NavBar navs={[
              {title:'修改密码'}
            ]} />
            <ContentBody className='container'> 
                <h2>修改密码</h2>
                <div className='height20'></div>
                <form>
                    <Row gutter={30}>
                      <Col span={12}>
                          <Form.Item 
                            label="新密码"
                          >
                            {getFieldDecorator('newPwd', {
                              rules: [
                                {
                                  required: true,
                                  message: '请输入新密码',
                                },
                              ]
                            })(<Input size="large" type='password'  placeholder="请输入新密码" />)}
                          </Form.Item>
                      </Col >
                    </Row>
                    <Row gutter={30}>
                      <Col span={12}>
                          <Form.Item 
                            label="确认密码"
                          >
                            {getFieldDecorator('newPwd2', {
                              rules: [
                                {
                                  required: true,
                                  message: '请输入确认密码',
                                },
                              ]
                            })(<Input size="large" type='password' placeholder="请输入确认密码"  />)}
                          </Form.Item>
                      </Col >
                    </Row>
                </form>
                <div className='height20'></div>
                <Row gutter={30}>
                    <Col span={12}>
                        <div className='text-center'>
                            <Button  
                            type='primary'
                            onClick={this.btnSaveClick.bind(this)}
                            >
                            保存
                            </Button>
                            <Button  
                                type='default'
                                style={{marginLeft:"20px"}} 
                                onClick={() =>{
                                    this.context.router.goBack();
                                }}
                            >
                                取消
                            </Button>
                        </div>
                    </Col >
                </Row>
            </ContentBody>
        </div>
    );
  }
}
ChangePassword.contextTypes= { router: React.PropTypes.object.isRequired};
export default Form.create()(ChangePassword);
